<template>
	<div class="home">
		<el-header style="text-align: right; font-size: 12px">
			<el-dropdown>
				<i class="el-icon-setting" style="margin-right: 15px"></i>
				<el-dropdown-menu slot="dropdown">
					<el-dropdown-item>个人资料</el-dropdown-item>
					<el-dropdown-item>退出登录</el-dropdown-item>
				</el-dropdown-menu>
			</el-dropdown>
			<span>{{userinfor.username}}</span>
		</el-header>
		<el-main>
			<el-card class="box-card">
				<div slot="header" class="clearfix">
					<span>欢迎{{userinfor.username}}进入用户管理系统!</span>
				</div>
				<div class="text item">用户名：{{userinfor.username}}</div>
				<div class="text item">姓&nbsp;&nbsp;&nbsp;名：{{userinfor.realname}}</div>
				<div class="text item">年&nbsp;&nbsp;&nbsp;龄：{{userinfor.age}}</div>
				<div class="text item">性&nbsp;&nbsp;&nbsp;别：{{userinfor.sex}}</div>
				<div class="text item">联系电话：{{userinfor.phone}}</div>
				<div class="text item">电子邮箱：{{userinfor.email}}</div>
			</el-card>
		</el-main>
	</div>
</template>
<script>
	import { mapState } from "vuex";
	/* import { mapState, mapActions } from "vuex"; */
	export default {
		name: "home",
		data() {
			return {};
		},
		computed: {
			/* userinfor() {
	      return this.$store.state.userinfo;
	    } */
			...mapState({
				userinfor: state => state.userinfo
			})
		}
	};
</script>
<style scoped>
	.home {
		width: 100%;
	}
	.el-header {
		background-color: #b3c0d1;
		color: #333;
		line-height: 60px;
	}
	.text {
		font-size: 14px;
	}

	.item {
		margin-bottom: 18px;
	}

	.clearfix:before,
	.clearfix:after {
		display: table;
		content: "";
	}
	.clearfix:after {
		clear: both;
	}
</style>